<template>
    <el-dialog title="登录" :visible.sync="dialogVisible" width="30%" :before-close="closeLoginDialog">
        <span>
            <el-form ref="userLogin" :rules="rules" :model="user">
                <el-form-item label="账号" prop="phone">
                    <el-input v-model="user.phone" placeholder="请输入电话号码..."></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password" placeholder="请输入密码..."></el-input>
                </el-form-item>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button type="text" @click="goToSign">没有账号？去注册</el-button>
            <el-button @click="closeLoginDialog">取 消</el-button>
            <el-button type="primary" @click="userLogin">登 录</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { loginUser } from '@/api/api'
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            user: {
                phone: '',
                password: ''
            },
            rules: {
                phone: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            },
            path: ''
        }
    },
    mounted(){
        this.path = this.$route.fullPath
    },
    methods: {
        closeLoginDialog:function(){
            const that = this
            that.$emit('closeLoginDialog')
        },
        userLogin:function(){
            const that = this
            that.$refs['userLogin'].validate((valid) => {
                if (valid) {
                    loginUser(that.user).then(res => {
                        if(res.status == 200 && res.data.id !== undefined){
                            localStorage.setItem('userId',res.data.id)
                            localStorage.setItem('userBirthday',res.data.birthday)
                            localStorage.setItem('userGender',res.data.gender)
                            localStorage.setItem('userImg',res.data.img)
                            localStorage.setItem('userName',res.data.name)
                            localStorage.setItem('userPhone',res.data.phone)
                            localStorage.setItem('userType',res.data.type)
                            that.$message({
                                message: '登录成功！',
                                type: 'success'
                            })
                            this.closeLoginDialog()
                            // this.reloadData()
                            location.reload()
                        }else{
                            that.$message({
                                message:'登录失败',
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        reloadData:function(){
            this.$emit('reloadData')
        },
        goToSign:function(){
            let tempPath = this.$route.fullPath
            if('/sign' === tempPath){
                return
            }
            this.closeLoginDialog()
            this.$router.push('/sign')
        }
    }
}
</script>
<style scoped>

</style>